
.tab-bar {
	color: #ffffff;
	font-size: 32rpx;
	position: fixed;
	bottom: calc(16rpx + constant(safe-area-inset-bottom));
	bottom: calc(16rpx + env(safe-area-inset-bottom));
	left: 50%;
	transform: translate(-50%);
	// background-color: #201d24;
	background-color: #000000;
	border-radius: 36rpx;
	width: calc(100% - 32rpx);
	.tab-bar-warp {
		display: flex;
		justify-content: space-between;
		padding: 0 48rpx;
		.tab-bar-item {
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			gap: 4rpx;
			height: 120rpx;
			width: 160rpx;
			.icon-outer {
				position: absolute;
				border-radius: 32rpx;
				overflow: hidden;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				z-index: 1;
				transition: .5s;
			}
			&--icon {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				font-size: 48rpx;
				z-index: 2;
			}
			&__active {
				.icon-outer {
					width: 80rpx;
					height: 80rpx;
					background-color: #ffffff;
				}
				.tab-bar-item--icon {
					color: #201d24;
					font-weight: bold;
				}
			}
		}
	}
}